<script setup lang="ts">
import {message} from "ant-design-vue";

// 关键词抢位设置
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const realRows = ref<any[]>(props.rows.filter((row: any) => row.type === 'kw'));
const visible = ref(false);
const emit = defineEmits([
  "refresh",
]);
watch(() => props.rows, (newVal) => {
  realRows.value = newVal.filter((row: any) => row.type === 'kw');
}, {
  deep: true
});
const handle = () => {
  if (realRows.value.length === 0) {
    message.error('请选择需要批量处理的数据！');
    return;
  }
  visible.value = true;
}
// [
//   {
//     "bidwordId": 1325957411129,
//     "campaignId": "68795158469",
//     "adgroupId": "69667843938",
//     "bidStrategyInfo": {
//       "bizCode": null,
//       "discount": 1,
//       "rank": 6,
//       "status": 1,
//       "rankName": "前六名"
//     }
//   },
//   {
//     "bidwordId": 1325957411131,
//     "campaignId": "68795158469",
//     "adgroupId": "69667843938",
//     "bidStrategyInfo": {
//       "bizCode": null,
//       "discount": 1,
//       "rank": 6,
//       "status": 1,
//       "rankName": "前六名"
//     }
//   }
// ]
const rank = ref(1);
const discount = ref(1);
const ok = () => {
  console.log('ok');
  if (discount.value < 1 || discount.value > 200) {
    message.error('抢位溢价设置范围为1-200');
    return;
  }
  console.log(realRows.value, rank.value, discount.value);
  WxtUtils.customRequest('https://one.alimama.com/bidword/update.json', props.bizCode, {
    bidwordList: realRows.value.map((row: any) => {
      return {
        adgroupId: row.adgroupId,
        bidStrategyInfo: {
          ...(row.bidStrategyInfo?row.bidStrategyInfo:{}) as any,
          rank: rank.value,
          discount: discount.value,
          rankName: rank.value === 1 ? '首条' : rank.value === 2 ? '前二名' : rank.value === 3 ? '前三名' : rank.value === 6 ? '前六名' : '',
          status: 1,
        },
        bidwordId: row.bidwordId,
        campaignId: row.campaignId
      }
    }),
  }).then(res => {
    message.success('操作成功！');
    emit('refresh');
    visible.value = false;
  }).catch(() => {
    message.error('操作失败！');
  });
}
</script>

<template>
  <div style="display: inline-block" @click="handle">
    <slot>
      <a-button type="primary" ghost size="small">抢位设置</a-button>
    </slot>
  </div>
  <wxt-modal :style="{
    top:'revert-layer'
  }" width="450px" title="修改抢位设置" v-model:visible="visible"
  >
    <div style="color: #666;font-size: 14px;padding:10px 0;">已选关键字：{{ rows.length }}</div>
    <a-radio-group v-model:value="rank">
      <a-row style="padding-bottom: 10px;">
        <a-radio :value="1">
          <a-row>
            <a-col>
              抢占首条
            </a-col>
            <a-col flex="1" v-if="rank==1" style="padding-left: 20px;">
              设置抢位溢价
              <a-input-number size="small" v-model:value="discount" :min="0" max="200" step="{1}" defaultValue="{0}"
                              style="width: 100px"
              >
                <template #addonAfter>%</template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-radio>
      </a-row>
      <a-row style="padding-bottom: 10px;">
        <a-radio :value="2">
          <a-row>
            <a-col>
              抢占前二名
            </a-col>
            <a-col flex="1" v-if="rank==2" style="padding-left: 20px;">
              设置抢位溢价
              <a-input-number size="small" v-model:value="discount" :min="0" max="200" step="{1}" defaultValue="{0}"
                              style="width: 100px"
              >
                <template #addonAfter>%</template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-radio>
      </a-row>
      <a-row style="padding-bottom: 10px;">
        <a-radio :value="3">
          <a-row>
            <a-col>
              抢占前三名
            </a-col>
            <a-col flex="1" v-if="rank==3" style="padding-left: 20px;">
              设置抢位溢价
              <a-input-number size="small" v-model:value="discount" :min="0" max="200" step="{1}" defaultValue="{0}"
                              style="width: 100px"
              >
                <template #addonAfter>%</template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-radio>
      </a-row>
      <a-row>
        <a-radio :value="6">
          <a-row>
            <a-col>
              抢占前六名
            </a-col>
            <a-col flex="1" v-if="rank==6" style="padding-left: 20px;">
              设置抢位溢价
              <a-input-number size="small" v-model:value="discount" :min="0" max="200" step="{1}" defaultValue="{0}"
                              style="width: 100px"
              >
                <template #addonAfter>%</template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-radio>
      </a-row>
    </a-radio-group>
    <a-divider/>
    <a-row>
      <a-col flex="1">
      </a-col>
      <a-col>
        <a-space>
          <a-button style="width: 100%" @click="visible=false">取消</a-button>
          <a-button type="primary" @click="ok" style="width: 100%">确定</a-button>
        </a-space>
      </a-col>
    </a-row>
  </wxt-modal>
</template>

<style scoped>

</style>
